
<template> 
    <el-row class="row-step"> 
        <template v-if="props.status < 35"> <!-- 订单未取消  -->
            <el-col :span="3" class="text-center step" :class="[props.status >= 2 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>待确认
            </el-col>
            <el-col :span="3" class="text-center step" :class="[props.status >= 3 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>待签署
            </el-col>
            <el-col :span="3" class="text-center step" :class="[props.status >= 5 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>待开提箱单
            </el-col>
            <el-col :span="3" class="text-center step" :class="[props.status >= 10 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>待提<template v-if="props.payStatus == 15">已付</template><template v-else>未付</template>
            </el-col>
            <el-col :span="3" class="text-center step" :class="[props.status >= 15 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>已提<template v-if="props.payStatus == 15">已付</template><template v-else>未付</template>
            </el-col>
            <el-col :span="3" class="text-center step" :class="[props.status >= 20 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>待还<template v-if="props.payStatus == 15">已付</template><template v-else>未付</template>
            </el-col>
            <el-col :span="3" class="text-center step" :class="[props.status >= 25 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>已还<template v-if="props.payStatus == 15">已付</template><template v-else>未付</template>
            </el-col>
            <el-col :span="3" class="text-center step last-step" :class="[props.status >= 30 ? 'arrow-col-35' : '' ]" >
                <span><el-icon><SuccessFilled /></el-icon></span>已完成
            </el-col>
        </template>
        <template v-if="props.status >= 35">
            <el-col v-if="props.cancellationStatus >= 2" :span="3" class="text-center step35" :class="[props.status >= 2 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 2">
                    <el-icon><CircleCloseFilled /></el-icon>待确认(已取消)
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>待确认</template>
            </el-col>
            <el-col v-if="props.cancellationStatus >= 3" :span="3" class="text-center step35" :class="[props.status >= 3 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 3">
                    <el-icon><CircleCloseFilled /></el-icon>待签署(已取消)
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>待签署</template>     
            </el-col>
            <el-col v-if="props.cancellationStatus >= 5" :span="3" class="text-center step35" :class="[props.status >= 5 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 5">
                    <el-icon><CircleCloseFilled /></el-icon>待开提箱单
                    <template v-if="props.currentNodeType == 10">(待确认)</template>
                    <template v-else-if="props.currentNodeType == 15">(已拒绝)</template>
                    <template v-else>(已取消)</template> 
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>待开提箱单</template>
            </el-col>
            <el-col v-if="props.cancellationStatus >= 10" :span="3" class="text-center step35" :class="[props.status >= 10 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 10">
                    <el-icon><CircleCloseFilled /></el-icon>待提<template v-if="props.payStatus == 15">已付</template><template v-else>未付</template>
                    <template v-if="props.currentNodeType == 10">(待确认)</template>
                    <template v-else-if="props.currentNodeType == 15">(已拒绝)</template>
                    <template v-else>(已取消)</template> 
                </template>
                <template v-else>
                    <el-icon><SuccessFilled /></el-icon>待提<template v-if="props.payStatus == 15">已付</template><template v-else>未付</template>
                </template>
            </el-col>
            <el-col v-if="props.cancellationStatus >= 15" :span="3" class="text-center step35" :class="[props.status >= 15 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 15">
                    <el-icon><CircleCloseFilled /></el-icon>已提<template v-if="props.payStatus == 15">已付</template><template v-else>未付</template>(已取消)
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>已提<template v-if="props.payStatus == 15">已付</template><template v-else>未付</template>
                </template>
            </el-col>
            <el-col v-if="props.cancellationStatus >= 20" :span="3" class="text-center step35" :class="[props.status >= 20 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 20">
                    <el-icon><CircleCloseFilled /></el-icon>待还<template v-if="props.payStatus == 15">已付</template><template v-else>未付</template>(已取消)
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>待还<template v-if="props.payStatus == 15">已付</template><template v-else>未付</template>
                </template>
            </el-col>
            <el-col v-if="props.cancellationStatus >= 25" :span="3" class="text-center step35" :class="[props.status >= 25 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 25">
                    <el-icon><CircleCloseFilled /></el-icon>已还<template v-if="props.payStatus == 15">已付</template><template v-else>未付</template>(已取消)
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>已还<template v-if="props.payStatus == 15">已付</template><template v-else>未付</template>
                </template>
            </el-col>
            <el-col v-if="props.cancellationStatus >= 30" :span="3" class="text-center step35 last-step" :class="[props.status >= 30 ? 'arrow-col-35' : '' ]" >
                <template v-if="props.cancellationStatus == 30">
                    <el-icon><CircleCloseFilled /></el-icon>已完成(已取消)
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>已完成</template>
            </el-col>
          
            <template v-if="props.currentNodeType != 10">
                <el-col :span="6">
                    <el-row class="_remark" align="middle" justify="center">
                        <el-col :offset="1" :span="6" class="text-right"><el-icon><WarningFilled /></el-icon>取消原因：</el-col>
                        <el-col :span="17">{{props.remark}}</el-col>
                    </el-row>
                </el-col>
            </template>
        </template>
    </el-row>
</template>
  
<script lang="ts" setup>
// import { computed, reactive, toRefs, watch } from 'vue'
// status 
const props = defineProps({
    status:{  // 订单所处流程节点的 2:待确认 3:待签署 5:待开提箱单 10:待提[待提未付/待提已付] 15:已提[已提未付/已提已付] 20：待还[待还已付/待还未付] 25：已还[已还已付/已还未付] 30：已完成 35:已取消
        type: Number,
        default: 2  
    },
    cancellationStatus:{  //取消订单时 订单所处的订单状态
        type: Number,
        default: 0   
    },
    remark:{ //订单取消原因
        type: String,
        default: ''
    },
    payStatus:{ //支付状态
        type: Number,
        default: 0
    },
    frontNodeReviewStatus:{ // 前节点审核状态(签署合同后取消状态)
        type: Number,
        default: 0
    },
    currentNodeType:{ // 前节点类型
        type: Number,
        default: 0
    },
})

</script>

<style lang="scss" scoped>
.row-step{
    border: 1px solid #E1E1E1;
}
.step{
    display: flex;          // 关键改动
    align-items: center;    // 关键改动
    justify-content: center; // 可选（如果需要水平居中）
    gap: 4px;     

    color: #666;
    height: 40px;
    line-height: 40px; 
    position: relative;
    font-size: 14px;
    padding-right: 40px; // 为箭头留出空间 
    &::after {
        content: "";
        position: absolute;
        right: -14px;
        top: 20px;
        transform: translateY(-50%) rotate(45deg);
        width: 27px;
        height: 27px;
        border-right: 1px solid #E1E1E1;
        border-top: 1px solid #E1E1E1;
        z-index: 1;
        // background-color: #32BB86;
    }
}
.arrow-col-45 {
  background-color: #32BB86;
  background-size: cover;
  color: #fff;
  position: relative;
  padding-right: 40px; // 为箭头留出空间 
  &::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 20px;
    transform: translateY(-50%) rotate(45deg);
    width: 27px;
    height: 27px;
    border-right: 2px solid #32BB86;
    border-top: 2px solid #32BB86;
    z-index: 1;
    background-color: #32BB86;
  }
  
    //   &:hover::after {
    //     border-color: darken(#409EFF, 10%);
    //   }
}
.arrow-col-35{
    background-color: #32BB86;
    background-size: cover;
    color: #fff;
    position: relative;
    padding-right: 40px; // 为箭头留出空间 
}
.last-step{
    &::after {
        content: "";
        border:none
    }
}
._remark{
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #eb6363;
}
.step35{
    display: flex;          // 关键改动
    align-items: center;    // 关键改动
    justify-content: center; // 可选（如果需要水平居中）
    gap: 4px;     

    color: #666;
    height: 40px;
    line-height: 40px; 
    position: relative;
    font-size: 14px;
    padding-right: 40px; // 为箭头留出空间 
    background-color: #eee;
    &::after {
        content: "";
        position: absolute;
        right: -14px;
        top: 20px;
        transform: translateY(-50%) rotate(45deg);
        width: 27px;
        height: 27px;
        border-right: 1px solid #E1E1E1;
        border-top: 1px solid #E1E1E1;
        z-index: 1;
    }
}
.arrow-col-45-35 {
  background-size: cover;
  color: #666;
  position: relative;
  padding-right: 40px; // 为箭头留出空间 
  &::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 20px;
    transform: translateY(-50%) rotate(45deg);
    width: 27px;
    height: 27px;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
    background-color: #eee;
  }
}
</style>